<html><head><title>Cal Planner</title>
<link type="text/css" href="/static/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="/static/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/static/js/jquery-ui-1.8.17.custom.min.js"></script>
{% block header %}

{% endblock %}
<script>
var adding_class = false;

function validate_course() {
  // First things first, gray out box
  $('#add-course-box').attr("disabled", "disabled"); 
  value = $('#add-course-box').val();
  $.getJSON('/api/add_class?term=' + value, function(data) {
    if (data.result == 'success') {
      course_name = data.course;
      $("#add-course-box").replaceWith(course_name + " <span value='" + course_name + "' class='remove_course'>[x]</span></li>");
      $("#courses_list").append("<li><span id='add-new-course'>Add new course</span>");
      attach_box();
      attach_remove_course();
      location.reload();
    } else {
      $('#add-course-box').removeAttr("disabled");
    }
  });
}

function lookup_assignments() {
  $(".post").each(function(i, item) {
    item = $(item);
    $.getJSON('/lookup/' + item.attr('id'), function(data) {
      if (data.result)
        return
    });
  });
}

function attach_post_submit() {
  $("#new_post_submit").click(function() {
    // Validate form
    if ($("#new_post_course").val() == "---") {
      // Need to choose a course
      return;
    } else if ($("#new_post_name").val() == "") {
      // Need to choose a name
      return;
    } else if ($("#new_post_date").val() == "") {
      // Need to choose a date
      return;
    }
    // Macros
    course = $("#new_post_course").val();
    name = $("#new_post_name").val();
    date = $("#new_post_date").val()
    
    // Disable inputs
    $('#new_post_course').attr("disabled", "disabled"); 
    $('#new_post_name').attr("disabled", "disabled"); 
    $('#new_post_date').attr("disabled", "disabled"); 
    
    // Send data over
    $.get("/api/new_post?name=" + name + "&course=" + course + "&date=" + date,
    function(data) {
      if (data.result == 'success') {
        $('#new_post_course').val();
        $('#new_post_course').val();
        $('#new_post_course').val();
        $('#new_post_course').removeAttr("disabled"); 
        $('#new_post_name').removeAttr("disabled"); 
        $('#new_post_date').removeAttr("disabled"); 
        location.reload();
      }
    }, "json");
  });
}

function attach_remove_course() {
  $(".remove_course").each(function(i, item) {
    $(item).unbind();
    $(item).click(function(event) {
      course = $(item).attr('value');
      $.getJSON('/api/remove_class?term=' + course, function(data) {
        if (data.result == 'success') {
          $(item).parent().fadeOut(500, function() {
            $(item).parent().replaceWith('');
          });
        }
      });
    });
  });
}

function attach_box() {
  $("#add-new-course").click(function(event) {
    adding_class = true;
    $(this).text("");
    $(this).replaceWith("<input type='text' id='add-course-box'>");
    $('#add-course-box').focus();
    $('#add-course-box').autocomplete({
      source: '/api/course_autocomplete',
      
    });
    $('#add-course-box').keyup(function(event) {
      if (event.keyCode == 13) {
        // Enter
        validate_course();
      }
    });/*
    $('#add-course-box').blur(function() {
      $("#add-course-box").replaceWith("<span id='add-new-course'>Add new course</span>");
      attach_box();
    });*/
  });
}

function attach_done() {
  // Make hiding work for assignments by sending a json call and then collapsing the post
  $(".post .post-done").each(function(i, item) {
    post_done = $(item);
    post = post_done.parent().parent();
    post_content = $(post.children[1]);
    item_id = post.attr('id');
    post_done.click(function() {
      $.getJSON('/api/done/' + item_id, function(data) {
        if (data.result == 'success') {
          if (data.done == true) {
            post_done.text('Done');
          } else {
            post_done.text('Not Done');
          }
        }
      });
    });
  });
}

function attach_hide() {
  // Make hiding work for assignments by sending a json call and then collapsing the post
  $(".post .post-hide").each(function(i, item) {
    post_hide = $(item);
    post = post_hide.parent().parent();
    post_content = post.children()[1];
    item_id = post.attr('id');
    post_hide.click(function() {
      $.getJSON('/api/hide/' + item_id, function(data) {
        if (data.result == 'success') {
          post.slideUp(500, function() {
            location.reload();
          });
        }
      });
    });
  });
}
$(document).ready(function(){
  attach_box();
  attach_remove_course();
  $("#new_post_date").datepicker({ dateFormat: 'yy-mm-dd' });
  attach_post_submit();
  lookup_assignments();
  attach_hide();
  attach_done();
  lookup_assignments();
});
</script>
<style>
  body {
    font-family: sans-serif;
    margin: 0px;
  }
  #container {
    width: 100%;
  }
  
  #inner {
    margin: 0 auto;
    width: 960px;
    min-height: 700px;
  }
  
  #navi {
    width: 250px;
    display: inline-block;
    position: relative;
    text-align: center;
    height: 100%;
    margin-top: 10px;
  }
  
  #navi li {
    list-style-type: none;
    margin: 5px auto;
    padding: 5px;
  }
  
  #content {
    width: 680px;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    border-left: 1px solid silver;
  }
  
  #header {
    background-color: #315C15;
    width: 100%;
    height: 30px;
  }
  
  #add_new {
    margin: 10px;
    border: 1px solid silver;
    padding: 10px;
    border-radius: 5px;
  }
  
  .post {
    border: 1px solid silver;
    margin: 10px;
    padding: 10px;
    border-radius: 5px;
    background-color: #92D681;
  }
  
  .post-top {
    width: 100%;
  }
  
  .post-class {
    display: inline-block;
  }
  
  .post-name {
    display: inline-block;
    margin: 0px auto;
  }
  
  .post-due {
    display: inline-block;
    float: right;
  }
  
  .post-done {
    text-align: right;
  }
  .bold-text {
    color: #112907;
  }
  
  #add-new-text {
    text-align: center;
  }
  .post-hide {
    text-align: right;
  }
  .fbFooterBorder {
    background-color: black;
  }
  
</style>
<style>
  body {
    font-family: sans-serif;
    margin: 0px;
  }
  #container {
    width: 100%;
  }
  #inner {
    margin: 0 auto;
    width: 960px;
    min-height: 700px;
  }
  #navi {
    width: 250px;
    display: inline-block;
    position: relative;
    text-align: center;
    height: 100%;
    margin-top: 10px;
  }
  #navi li {
    list-style-type: none;
    margin: 5px auto;
    padding: 5px;
  }
  #content {
    width: 680px;
    height: 100%;
    vertical-align: top;
    display: inline-block;
    border-left: 1px solid silver;
  }
  #header {
    background-color: #315C15;
    width: 100%;
    height: 30px;
    text-align: right;
  }
  #logout {
    margin: 5px;
  }
  #profile_pic {
    max-width: 100px;
    max-height: 100px;
  }
</style>
</head>
<body>
<!--- Facebook Plugin --->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=289349454459850";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!--- End Facebook Plugin --->
<div id='header'>
  <span id='logout'><a href='/logout'>Logout</a></span>
</div>
<div id='container'>
  <div id='inner'>
    <div id='navi'>
      <a href='/'>
        <span class='bold-text'>{{profile.facebook_name}}</span><br>
        <div style="width: 100px; height: 100px; margin: 10px auto;">
          {% if image_url %}
            <img src='{{image_url}}' id='profile_pic'>
          {% endif %}
        </div>
      </a>
      <ul id='courses_list'>
        {% for course in courses %}
          <li> {{course}} <span value="{{course}}" class="remove_course">[x]</span>
        {% endfor %}
        <li><span id='add-new-course'>Add new course</span>
      </ul>
    </div>
    <div id='content'>
      {% block content %}
        content
      {% endblock %}
    </div>
  </div>
</div>
</body>
</html>